<template>
    <div class="createQuestion">
      <header>添加成员</header>
      <div class="content">
        <el-checkbox-group v-model="checkUser">
          <div class="con" v-for="(user,index) in usersLists" :key="index">
            <div class="con_left">
              <el-checkbox :checked="user.bool" :label="user">{{user.firstName}}</el-checkbox>
            </div>
            <div class="con_right">{{user.deparment}}  {{user.job}}</div>
          </div>
        </el-checkbox-group>
      </div>
      <footer>
        <div class="buttons but1" @click="close">取消</div>
        <div class="buttons but2" @click="addQuestion">确认</div>
      </footer>
    </div>
</template>

<script>
  import {mapGetters,mapActions} from 'vuex'
  export default {
    props:['userList'],
    name: "createQuestion",
    data() {
      return {
        checkUser:[],
        usersLists:[]
      }
    },
    computed:{
      ...mapGetters([

      ])
    },
    created() {
      let self = this
      self.getAllUser()
    },
    mounted() {
    },
    methods: {
      ...mapActions([
        'upstate'
      ]),
      //取消
      close(){
        let self = this
        self.upstate({key:'showAddMember',val:false})
      },
      //确定
      addQuestion(){
        this.$emit('addMember',this.checkUser);
      },
      //获取所有用户
      getAllUser(){
        let self = this
        self.$http.get(self.conURL + 'api/users').then(res => {
          let list = self.userList;
          let memberList=[];
          for (var j = 0;j < res.data.length;j++){
            let user={};
            user["firstName"]=res.data[j].firstName;
            user["lastName"]=res.data[j].lastName;
            user["email"]=res.data[j].email;
            user["phone"]=res.data[j].phone;
            user["deparment"]=res.data[j].deparment;
            user["job"]=res.data[j].job;
            user["imageUrl"]=res.data[j].imageUrl;
            user["login"]=res.data[j].login;
            user["id"]=res.data[j].id;
            user["leader"]=false;
            user["msg"]="设为leader";
            for(var i = 0;i < list.length;i++){
              if (list[i].login == res.data[j].login){
                user["bool"]=true;
              }else{
                let user={};
                user["bool"]=false;
              }
            }
            memberList.push(user);
          }
          self.usersLists = memberList;
        })
      },
    }
  }
</script>

<style lang="less">
  .createQuestion{
    width: 660px;
    height: 100%;
    background: #fff;
    border-left: 1px solid #e5e5e5;
    box-shadow: #eeeeee 0px 0px 15px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 9;
    header{
      width: 100%;
      height: 74px;
      line-height: 74px;
      border-bottom: 1px solid #e5e5e5;
      padding: 0 30px;
      box-sizing: border-box;
      font-size: 20px;
      color: #222222;
    }
    .content{
      width: 100%;
      display: flex;
      flex-direction: column;
      padding: 32px 28px;
      padding-top: 0;
      box-sizing: border-box;
      .con{
        width: 100%;
        border-bottom: 1px solid #e5e5e5;
        padding: 0 30px;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .con_left{
          .el-checkbox__inner{
            width: 20px;
            height: 20px;
            margin-top: 20px;
            margin-bottom: 20px;
          }
          .el-checkbox__inner::after{
            height: 10px;
            left: 7px;
            top: 2px;
          }
          .el-checkbox__label{
            color: #333;
            font-size: 14px;
            font-weight: 600;
          }
        }
        .con_right{
          color: #aaa;
          font-size: 14px;
          line-height: 60px;
          font-weight: 600;
        }
      }
      .con:last-child{
        border-bottom: none;
      }
    }
    footer{
      width: 100%;
      height: 59px;
      background: #fafafa;
      border-top: 1px solid #e5e5e5;
      position: absolute;
      right: 0;
      bottom: 0;
      display: flex;
      flex-direction: row;
      justify-content: center;
      .buttons{
        width: 93px;
        height: 37px;
        line-height: 39px;
        text-align: center;
        font-size: 16px;
        margin: auto 0;
        cursor: pointer;
      }
      .but1{
        background: #fff;
        color: #666666;
        border: 1px solid #dddddd;
        margin-right: 10px;
      }
      .but2{
        background: #0f76c8;
        color: #fff;
        border: 1px solid #0f76c8;
      }
    }
  }
</style>
